<template>
    <div class="video-message-view column clearfix">
        <div class="left-box clearfix">
            <h1 class="page-title">电影票 - 苏州</h1>
            <div class="advert">
                <img src="../assets/img/banner.jpg"
                    alt="">
            </div>
            <div class="nowplaying">
                <div class="mod-hd">
                    <h2>正在上映</h2>
                </div>
                <div class="row card-box">
                    <CardBox v-for="(item, index) in 14"
                        :key="index"
                        :info="cardInfo"></CardBox>
                </div>
            </div>
            <div class="nextplaying">
                <div class="mod-hd">
                    <h2>即将上映</h2>
                </div>
                <div class="row card-box">
                    <CardBox v-for="(item, index) in 14"
                        :key="index"
                        :info="cardInfo"></CardBox>
                </div>
            </div>
        </div>
        <div class="right-box">

        </div>
        <div class="bottom">
            <img src="../assets/img/bottom-gg.jpg"
                alt="">
        </div>
    </div>
</template>
<script>
import CardBox from "@/components/CardBox"
export default {
    neme: "videx-message-view",
    components: {
        CardBox
    },
    data() {
        return {
            cardInfo: {
                imgUrl: require("../assets/img/card.jpg"),
                movieName: "蜘蛛侠:平行宇宙",
                movieNumber: 3.5,
                time: 2018,
                peopleNumber: 4445155,
                minute: 180,
                address: "中国大陆",
                director: "赵建杰/老赵",
                performer: "哈哈/呵呵/嘻嘻/么么哒"
            }
        }
    }
}
</script>
<style lang="less" scope>
    .video-message-view {
        position: relative;
        margin-top: 30px;
        .left-box {
            width: 700px;
            float: left;
            .advert {
                width: 700px;
                height: 112px;
                img {
                    min-width: 700px;
                    height: 112px;
                }
            }
            .nowplaying {
                margin-top: 20px;
                min-width: 850px;
                .mod-hd {
                    width: 100%;
                    height: 35px;
                    border-bottom: 1px solid #eee;
                }
                .card-box {
                    width: 850px;
                    flex-wrap: wrap;
                    margin-left: -25px;
                    padding-top: 10px;
                }
            }
            .nextplaying {
                margin-top: 20px;
                min-width: 850px;
                .mod-hd {
                    width: 100%;
                    height: 35px;
                    border-bottom: 1px solid #eee;
                }
                .card-box {
                    min-width: 850px;
                    flex-wrap: wrap;
                    margin-left: -25px;
                    padding-top: 10px;
                }
            }
        }
        .bottom {
            width: 100%;
            height: 110px;
            // background-color: black;
        }
    }
</style>
